<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>主页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <!-- 引入 Font Awesome 的 CSS -->
    <!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">-->
    <link rel="stylesheet" href="/fontawesome-free-6.4.0-web/css/all.min.css">

    <!--    &lt;!&ndash; 引入 SweetAlert2 CSS &ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">-->

    <!--    &lt;!&ndash; 引入 SweetAlert2 JS &ndash;&gt;-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>-->
    <script src="/sweetalert2-11.12.2/sweetalert2@11.js"></script>


    <style>
        .welcome-message {
            margin-bottom: 50px; /* 增加引用文本和按钮之间的间距 */
        }

        .btn-square {
            width: 150px; /* 设置按钮宽度 */
            height: 100px; /* 设置按钮高度 */
            margin-bottom: 10px; /* 设置按钮之间的间距 */
        }

        /* 恢复和调整图标颜色 */
        /* 确保设置的图标颜色具有高优先级 */
        .status-icon.text-primary {
            color: #007bff !important; /* 蓝色 */
        }

        .status-icon.text-danger {
            color: #dc3545 !important; /* 红色 */
        }

        .status-icon.text-success {
            color: #28a745 !important; /* 绿色 */
        }

        .status-icon.text-info {
            color: #17a2b8 !important; /* 青色 */
        }

        .status-icon.text-warning {
            color: #ffc107 !important; /* 黄色 */
        }

        .status-icon.text-secondary {
            color: #6c757d !important; /* 灰色 */
        }

        .status-icon.text-dark {
            color: #343a40 !important; /* 深灰色 */
        }


        /* 美化卡片 */
        .status-card {
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            transition: transform 0.2s, box-shadow 0.2s;
            background: linear-gradient(135deg, #f9f9f9, #ffffff); /* 添加渐变背景 */
            padding: 20px;
        }

        .status-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        /* 状态内容对齐和样式 */
        .status-content {
            display: flex;
            align-items: center;
        }

        .status-icon {
            font-size: 40px;
            margin-right: 15px;
        }

        .status-title {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
        }

        .card-body {
            display: flex;
            align-items: center;
        }

        p {
            margin: 0;
        }

        /* 背景色和字体颜色 */
        .status-card:nth-child(odd) {
            background-color: #f9f9f9;
        }

        .status-card:nth-child(even) {
            background-color: #ffffff;
        }

        .status-card p {
            font-size: 20px;
        }

        /* 提升卡片的视觉层次 */
        .container {
            padding: 20px;
        }

        .row {
            margin-top: 20px;
        }

        .border-bottom {
            margin-bottom: 0px;
        }

        .btn {
            display: inline-block;
            margin: 20px;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            /*background-color: #007bff;*/
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #0056b3;
        }

    </style>
</head>

<body class="gray-bg">


<div class="container">
    <div class="row border-bottom white-bg dashboard-header welcome-message">
        <div class="col-sm-12">
            <blockquote class="text-warning" style="font-size: 24px">
                欢迎访问智眼图像识别系统
            </blockquote>
        </div>
    </div>
    <!--    终端-->
    <!--        <div id="terminal" style="width: 100%; height: 200px; overflow-y: auto;"></div>-->
    <div class="container mt-5">
        <div class="row" id="trainMissionContainer">
            <!-- 动态插入训练任务 -->
        </div>
    </div>

    <div class="container mt-5">
        <div class="row" id="predictMissionContainer">
            <!-- 动态插入训练任务 -->
        </div>
    </div>

    <!--硬件信息-->
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                <!-- CPU Load -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-tachometer-alt status-icon text-primary"></i>
                            <div>
                                <p class="status-title">CPU Load:</p>
                                <p id="cpuLoad">0%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CPU Temperature -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-thermometer-half status-icon text-danger"></i>
                            <div>
                                <p class="status-title">CPU Temperature:</p>
                                <p id="cpuTemperature">0 °C</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Total Memory -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-memory status-icon text-success"></i>
                            <div>
                                <p class="status-title">Total Memory:</p>
                                <p id="totalMemory">0 GB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Available Memory -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-check-circle status-icon text-info"></i>
                            <div>
                                <p class="status-title">Available Memory:</p>
                                <p id="availableMemory">0 GB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Used Memory -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-times-circle status-icon text-warning"></i>
                            <div>
                                <p class="status-title">Used Memory:</p>
                                <p id="usedMemory">0 GB</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <!-- GPU Name -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-desktop status-icon text-secondary"></i>
                            <div>
                                <p class="status-title">GPU Name:</p>
                                <p id="gpuName">Unknown</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- GPU Vendor -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-industry status-icon text-dark"></i>
                            <div>
                                <p class="status-title">GPU Vendor:</p>
                                <p id="gpuVendor">Unknown</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- GPU Memory Used -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-hdd status-icon text-warning"></i>
                            <div>
                                <p class="status-title">GPU Memory Used:</p>
                                <p id="gpuMemoryUsed">0 GB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- GPU Memory Total -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-database status-icon text-info"></i>
                            <div>
                                <p class="status-title">GPU Memory Total:</p>
                                <p id="gpuMemoryTotal">0 GB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- GPU Memory Utilization -->
                <div class="card status-card">
                    <div class="card-body">
                        <div class="status-content">
                            <i class="fas fa-chart-line status-icon text-primary"></i>
                            <div>
                                <p class="status-title">GPU Memory Utilization:</p>
                                <p id="gpuMemoryUtilization">0%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>


<!--<script th:inline="javascript">-->
<!--    $(document).ready(function () {-->
<!--        // 定义状态-->
<!--        // var prefix = ctx + "deep_learning/trainMission";-->
<!--        // 发起Ajax请求-->
<!--        $.ajax({-->
<!--            url: '/deep_learning/trainMission/getWaitAndTrainingList',-->
<!--            type: 'GET',-->
<!--            success: function (response) {-->
<!--                if (Array.isArray(response)) {-->
<!--                    var trainMissionContainer = $('#trainMissionContainer');-->
<!--                    console.log("response: ", response)-->
<!--                    if (response) {-->
<!--                        response.forEach(function (trainMission) {-->
<!--                            var id = trainMission[0];-->
<!--                            var model = trainMission[1];-->
<!--                            var datasetTrain = trainMission[2];-->
<!--                            var datasetVal = trainMission[3];-->
<!--                            var batchSize = trainMission[4];-->
<!--                            var minEpoch = trainMission[5];-->
<!--                            var maxEpoch = trainMission[6];-->
<!--                            var status = trainMission[7];-->
<!--                            var earlyStop = trainMission[8];-->
<!--                            var opLr = trainMission[9];-->
<!--                            var userId = trainMission[10];-->
<!--                            var userName = trainMission[11];-->

<!--                            var statusText = '';-->
<!--                            var statusColor = '';-->
<!--                            switch (status) {-->
<!--                                case '待训练':-->
<!--                                    statusText = '待训练';-->
<!--                                    statusColor = 'orange';-->
<!--                                    break;-->
<!--                                case '训练中':-->
<!--                                    statusText = '训练中';-->
<!--                                    statusColor = 'blue';-->
<!--                                    break;-->
<!--                            }-->
<!--                            var cardHtml = `-->
<!--                            <div class="col-md-6">-->
<!--                                <div class="card status-card">-->
<!--                                    <div class="card-body">-->
<!--                                        <div class="status-content">-->
<!--                                            <i class="fas fa-tasks status-icon" style="color: ${statusColor};"></i>-->
<!--                                            <div>-->
<!--                                                <p class="status-title">任务名称: ${id}</p>-->
<!--                                                <p>状态: <span style="color: ${statusColor};">${statusText}</span></p>-->
<!--                                                <p>模型: ${model}</p>-->
<!--                                                <p>训练集: ${datasetTrain}</p>-->
<!--                                                <p>验证集: ${datasetVal}</p>-->
<!--&lt;!&ndash;                                                <p>批大小: ${batchSize}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <p>最小轮数: ${minEpoch}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <p>最大轮数: ${maxEpoch}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <p>早停: ${earlyStop}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <p>学习率: ${opLr}</p>&ndash;&gt;-->
<!--                                                <p>归属用户: ${userName}</p>-->
<!--&lt;!&ndash;                                                <button class="btn btn-primary" onclick="startTrain('${id}')">开始训练</button>&ndash;&gt;-->
<!--                                                <button class="btn btn-danger" onclick="removeTrainingMission('${id}')">移除任务</button>-->


<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        `;-->
<!--                            trainMissionContainer.append(cardHtml);-->
<!--                        });-->
<!--                    } else {-->
<!--                        trainMissionContainer.append('<p>没有符合条件的训练任务。</p>');-->
<!--                    }-->
<!--                } else {-->
<!--                    console.error('Response is not an array:', response);-->
<!--                    alert('获取的训练任务数据格式不正确。');-->
<!--                }-->
<!--            },-->
<!--            error: function () {-->
<!--                // alert('无法获取训练任务数据。');-->
<!--            }-->
<!--        });-->
<!--    });-->

<!--    // $.ajax({-->
<!--    //     url: '/deep_learning/predict/getWaitAndPredictList',-->
<!--    //     type: 'GET',-->
<!--    //     success: function (response) {-->
<!--    //         if (Array.isArray(response)) {-->
<!--    //             var predictMissionContainer = $('#predictMissionContainer');-->
<!--    //             console.log("response: ", response)-->
<!--    //             if (response) {-->
<!--    //                 response.forEach(function (predictMission) {-->
<!--    //                     var statusText = '';-->
<!--    //                     var statusColor = '';-->
<!--    //                     switch (predictMission.status) {-->
<!--    //                         case '待识别':-->
<!--    //                             statusText = '待识别';-->
<!--    //                             statusColor = 'orange';-->
<!--    //                             break;-->
<!--    //                         case '识别中':-->
<!--    //                             statusText = '识别中';-->
<!--    //                             statusColor = 'blue';-->
<!--    //                             break;-->
<!--    //                     }-->
<!--    //                     var cardHtml = `-->
<!--    //                         <div class="col-md-6">-->
<!--    //                             <div class="card status-card">-->
<!--    //                                 <div class="card-body">-->
<!--    //                                     <div class="status-content">-->
<!--    //                                         <i class="fas fa-tasks status-icon" style="color: ${statusColor};"></i>-->
<!--    //                                         <div>-->
<!--    //                                             <p class="status-title">任务名称: ${predictMission.trainMissionName}</p>-->
<!--    //                                             <p>状态: <span style="color: ${statusColor};">${predictMission.status}</span></p>-->
<!--    //                                             <p>识别数据集: ${predictMission.datasetName}</p>-->
<!--    //                                             <p>开始时间: ${predictMission.beginTime}</p>-->
<!--    //                                             <button class="btn btn-danger" onclick="removeTrainingMission('${predictMission.id}')">移除任务</button>-->
<!--    //                                         </div>-->
<!--    //                                     </div>-->
<!--    //                                 </div>-->
<!--    //                             </div>-->
<!--    //                         </div>-->
<!--    //                     `;-->
<!--    //                     predictMissionContainer.append(cardHtml);-->
<!--    //                 });-->
<!--    //             } else {-->
<!--    //                 predictMissionContainer.append('<p>没有符合条件的训练任务。</p>');-->
<!--    //             }-->
<!--    //         } else {-->
<!--    //             console.error('Response is not an array:', response);-->
<!--    //             alert('获取的训练任务数据格式不正确。');-->
<!--    //         }-->
<!--    //     },-->
<!--    //     error: function () {-->
<!--    //         // alert('无法获取训练任务数据。');-->
<!--    //     }-->
<!--    // });-->
<!--//    检测是否有任务需要训练.如果有就调用接口开始训练-->
<!--//     每隔 1 秒检测一次是否有任务需要训练-->
<!--    setInterval(function () {-->
<!--        $.ajax({-->
<!--            url: '/deep_learning/trainMission/doTrain',-->
<!--            type: 'GET',-->
<!--            success: function (response) {-->
<!--                if (response) {-->
<!--                    console.log('开始训练任务:', response)-->
<!--                } else {-->
<!--                    // console.error('Response is not an array:', response);-->
<!--                    alert('获取的训练任务数据格式不正确。');-->
<!--                }-->
<!--            },-->
<!--            error: function () {-->
<!--                // alert('无法获取训练任务数据。');-->
<!--            }-->
<!--        });-->
<!--        $.ajax({-->
<!--            url: '/deep_learning/predict/doPredict',-->
<!--            type: 'GET',-->
<!--            success: function (response) {-->
<!--                if (response) {-->
<!--                    console.log('开始训练任务:', response)-->
<!--                } else {-->
<!--                    // console.error('Response is not an array:', response);-->
<!--                    alert('获取的训练任务数据格式不正确。');-->
<!--                }-->
<!--            },-->
<!--            error: function () {-->
<!--                // alert('无法获取训练任务数据。');-->
<!--            }-->
<!--        });-->
<!--    }, 1000);-->


<!--</script>-->

<!--<script>-->
<!--    如果为待训练任务，就只改变数据库的值就行了，如果是训练中任务，就需要调用接口停止训练-->
<!--    function removeTrainingMission(id) {-->
<!--        $.ajax({-->
<!--            url: '/deep_learning/trainMission/updateStatus/' + id,-->
<!--            type: 'GET',-->
<!--            success: function (response) {-->
<!--                console.log(response);-->
<!--                location.reload();-->
<!--            },-->
<!--            error: function (xhr, status, error) {-->
<!--                console.error('请求失败:', error);-->
<!--            }-->
<!--        });-->
<!--    }-->
<!--</script>-->

<!--获取硬件状态信息-->
<script>
    function fetchSystemInfo() {
        $.ajax({
            url: '/api/system',
            method: 'GET',
            success: function (data) {
                $('#cpuLoad').text(data.cpuLoad.toFixed(2) + '%');
                $('#cpuTemperature').text(data.cpuTemperature.toFixed(2) + '℃');
                $('#totalMemory').text(data.totalMemory);
                $('#availableMemory').text(data.availableMemory);
                $('#usedMemory').text(data.usedMemory);
                $('#gpuName').text(data.gpuName);
                $('#gpuVendor').text(data.gpuVendor);
                // $('#gpuVRAM').text(data.gpuVRAM);
                // $('#systemCpuVoltage').text(data.systemCpuVoltage.toFixed(2));
                $('#gpuMemoryUsed').text(data.gpuMemoryUsed);
                $('#gpuMemoryTotal').text(data.gpuMemoryTotal);
                $('#gpuMemoryUtilization').text(data.gpuMemoryUtilization);
                // 检查 fanSpeeds 是否是数组，如果是数组则使用 join 方法，否则直接显示
                // if (Array.isArray(data.fanSpeeds)) {
                //     $("#fanSpeeds").text("Fan Speeds: " + data.fanSpeeds.join(", ") + " RPM");
                // } else {
                //     $("#fanSpeeds").text("Fan Speeds: " + data.fanSpeeds + " RPM");
                // }
            },
            error: function (error) {
                console.error('Error fetching system info', error);
            }
        });
    }

    // Fetch system info every 1 seconds
    setInterval(fetchSystemInfo, 500);
    fetchSystemInfo();
</script>

<!--上传图片-->
<!--<script>-->
<!--    $(document).ready(function () {-->
<!--        $('#uploadButton').click(function () {-->
<!--            Swal.fire({-->
<!--                title: '请输入数据集名称',-->
<!--                input: 'text',-->
<!--                inputPlaceholder: '数据集名称',-->
<!--                showCancelButton: true,-->
<!--                confirmButtonText: '确认',-->
<!--                cancelButtonText: '取消',-->
<!--                inputValidator: (value) => {-->
<!--                    if (!value) {-->
<!--                        return '数据集名称不能为空！';-->
<!--                    }-->
<!--                }-->
<!--            }).then((result) => {-->
<!--                if (result.isConfirmed) {-->
<!--                    var fileName = result.value; // 获取输入的数据集名称-->

<!--                    // 创建一个文件输入框-->
<!--                    var fileInput = document.createElement('input');-->
<!--                    fileInput.type = 'file';-->
<!--                    fileInput.multiple = true; // 允许多文件选择-->
<!--                    fileInput.style.display = 'none';-->
<!--                    document.body.appendChild(fileInput);-->

<!--                    // 文件选择后触发的事件-->
<!--                    fileInput.addEventListener('change', function (event) {-->
<!--                        var files = event.target.files;-->
<!--                        if (files.length > 0) {-->
<!--                            var formData = new FormData();-->
<!--                            for (var i = 0; i < files.length; i++) {-->
<!--                                formData.append('files', files[i]);-->
<!--                            }-->

<!--                            // 添加文件名到 FormData-->
<!--                            formData.append('fileName', fileName);-->

<!--                            // 发送文件到后端-->
<!--                            $.ajax({-->
<!--                                url: '/upload', // 后端控制器的请求路径-->
<!--                                type: 'POST',-->
<!--                                data: formData,-->
<!--                                processData: false,-->
<!--                                contentType: false,-->
<!--                                success: function (response) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'success',-->
<!--                                        title: '文件上传成功',-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 1500-->
<!--                                    });-->
<!--                                    console.log(response);-->
<!--                                },-->
<!--                                error: function (xhr, status, error) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'error',-->
<!--                                        title: '文件上传失败',-->
<!--                                        text: '错误信息: ' + error,-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 2000-->
<!--                                    });-->
<!--                                    console.error('请求失败:', error);-->
<!--                                }-->
<!--                            });-->
<!--                        }-->
<!--                    });-->

<!--                    // 手动触发文件输入框的点击事件以打开文件选择框-->
<!--                    fileInput.click();-->
<!--                }-->
<!--            });-->
<!--        });-->
<!--    });-->
<!--</script>-->

<!--上传mask-->
<!--<script>-->
<!--    $(document).ready(function () {-->
<!--        // 上传 Mask 文件-->
<!--        $('#uploadMaskButton').click(function () {-->
<!--            Swal.fire({-->
<!--                title: '请输入数据集名称',-->
<!--                input: 'text',-->
<!--                inputPlaceholder: '数据集名称',-->
<!--                showCancelButton: true,-->
<!--                confirmButtonText: '确认',-->
<!--                cancelButtonText: '取消',-->
<!--                inputValidator: (value) => {-->
<!--                    if (!value) {-->
<!--                        return '数据集名称不能为空！';-->
<!--                    }-->
<!--                }-->
<!--            }).then((result) => {-->
<!--                if (result.isConfirmed) {-->
<!--                    var fileName = result.value; // 获取输入的数据集名称-->

<!--                    // 创建一个文件输入框-->
<!--                    var fileInput = document.createElement('input');-->
<!--                    fileInput.type = 'file';-->
<!--                    fileInput.multiple = true; // 允许多文件选择-->
<!--                    fileInput.style.display = 'none';-->
<!--                    document.body.appendChild(fileInput);-->

<!--                    // 文件选择后触发的事件-->
<!--                    fileInput.addEventListener('change', function (event) {-->
<!--                        var files = event.target.files;-->
<!--                        if (files.length > 0) {-->
<!--                            var formData = new FormData();-->
<!--                            for (var i = 0; i < files.length; i++) {-->
<!--                                formData.append('files', files[i]);-->
<!--                            }-->

<!--                            // 添加文件名到 FormData-->
<!--                            formData.append('fileName', fileName);-->

<!--                            // 发送文件到后端-->
<!--                            $.ajax({-->
<!--                                url: '/uploadMask', // 后端控制器的请求路径-->
<!--                                type: 'POST',-->
<!--                                data: formData,-->
<!--                                processData: false,-->
<!--                                contentType: false,-->
<!--                                success: function (response) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'success',-->
<!--                                        title: '文件上传成功',-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 1500-->
<!--                                    });-->
<!--                                    console.log(response);-->
<!--                                },-->
<!--                                error: function (xhr, status, error) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'error',-->
<!--                                        title: '文件上传失败',-->
<!--                                        text: '错误信息: ' + error,-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 2000-->
<!--                                    });-->
<!--                                    console.error('请求失败:', error);-->
<!--                                }-->
<!--                            });-->
<!--                        }-->
<!--                    });-->

<!--                    // 手动触发文件输入框的点击事件以打开文件选择框-->
<!--                    fileInput.click();-->
<!--                }-->
<!--            });-->
<!--        });-->

<!--        $('#uploadModelButton').click(function () {-->
<!--            Swal.fire({-->
<!--                title: '请上传模型文件',-->
<!--                input: 'file',-->
<!--                inputAttributes: {-->
<!--                    'accept': '.py', // 仅限 .py 文件-->
<!--                    'multiple': false // 不允许多文件-->
<!--                },-->
<!--                showCancelButton: true,-->
<!--                confirmButtonText: '上传',-->
<!--                cancelButtonText: '取消',-->
<!--                didOpen: () => {-->
<!--                    const fileInput = Swal.getInput();-->
<!--                    fileInput.addEventListener('change', function (event) {-->
<!--                        const file = event.target.files[0];-->
<!--                        if (file) {-->
<!--                            var formData = new FormData();-->
<!--                            formData.append('file', file); // 确保字段名是 'file'-->
<!--                            formData.append('fileName', file.name.replace('.py', ''));-->

<!--                            console.log("File to be uploaded:", file);-->
<!--                            console.log("FormData entries:");-->
<!--                            for (var pair of formData.entries()) {-->
<!--                                console.log(pair[0] + ': ' + pair[1]);-->
<!--                            }-->

<!--                            // 发送文件到后端-->
<!--                            $.ajax({-->
<!--                                url: '/uploadModel', // 后端控制器的请求路径-->
<!--                                type: 'POST',-->
<!--                                data: formData,-->
<!--                                processData: false,-->
<!--                                contentType: false,-->
<!--                                success: function (response) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'success',-->
<!--                                        title: '文件上传成功',-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 1500-->
<!--                                    });-->
<!--                                    console.log("文件信息", response);-->
<!--                                },-->
<!--                                error: function (xhr, status, error) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'error',-->
<!--                                        title: '文件上传失败',-->
<!--                                        text: '错误信息: ' + error,-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 2000-->
<!--                                    });-->
<!--                                    console.error('请求失败:', error);-->
<!--                                }-->
<!--                            });-->
<!--                        }-->
<!--                    });-->
<!--                }-->
<!--            });-->
<!--        });-->


<!--        // 上传验证集-->
<!--        $('#uploadValButton').click(function () {-->
<!--            Swal.fire({-->
<!--                title: '请输入验证集名称',-->
<!--                input: 'text',-->
<!--                inputPlaceholder: '验证集名称',-->
<!--                showCancelButton: true,-->
<!--                confirmButtonText: '确认',-->
<!--                cancelButtonText: '取消',-->
<!--                inputValidator: (value) => {-->
<!--                    if (!value) {-->
<!--                        return '验证集名称不能为空！';-->
<!--                    }-->
<!--                }-->
<!--            }).then((result) => {-->
<!--                if (result.isConfirmed) {-->
<!--                    var fileName = result.value; // 获取输入的数据集名称-->

<!--                    // 创建一个文件输入框-->
<!--                    var fileInput = document.createElement('input');-->
<!--                    fileInput.type = 'file';-->
<!--                    fileInput.multiple = true; // 允许多文件选择-->
<!--                    fileInput.style.display = 'none';-->
<!--                    document.body.appendChild(fileInput);-->

<!--                    // 文件选择后触发的事件-->
<!--                    fileInput.addEventListener('change', function (event) {-->
<!--                        var files = event.target.files;-->
<!--                        if (files.length > 0) {-->
<!--                            var formData = new FormData();-->
<!--                            for (var i = 0; i < files.length; i++) {-->
<!--                                formData.append('files', files[i]);-->
<!--                            }-->

<!--                            // 添加文件名到 FormData-->
<!--                            formData.append('fileName', fileName);-->

<!--                            // 发送文件到后端-->
<!--                            $.ajax({-->
<!--                                url: '/uploadVal', // 后端控制器的请求路径-->
<!--                                type: 'POST',-->
<!--                                data: formData,-->
<!--                                processData: false,-->
<!--                                contentType: false,-->
<!--                                success: function (response) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'success',-->
<!--                                        title: '文件上传成功',-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 1500-->
<!--                                    });-->
<!--                                    console.log(response);-->
<!--                                },-->
<!--                                error: function (xhr, status, error) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'error',-->
<!--                                        title: '文件上传失败',-->
<!--                                        text: '错误信息: ' + error,-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 2000-->
<!--                                    });-->
<!--                                    console.error('请求失败:', error);-->
<!--                                }-->
<!--                            });-->
<!--                        }-->
<!--                    });-->

<!--                    // 手动触发文件输入框的点击事件以打开文件选择框-->
<!--                    fileInput.click();-->
<!--                }-->
<!--            });-->
<!--        });-->

<!--        // 上传验证集 Mask 文件-->
<!--        $('#uploadValMaskButton').click(function () {-->
<!--            Swal.fire({-->
<!--                title: '请输入验证集名称',-->
<!--                input: 'text',-->
<!--                inputPlaceholder: '验证集名称',-->
<!--                showCancelButton: true,-->
<!--                confirmButtonText: '确认',-->
<!--                cancelButtonText: '取消',-->
<!--                inputValidator: (value) => {-->
<!--                    if (!value) {-->
<!--                        return '验证集名称不能为空！';-->
<!--                    }-->
<!--                }-->
<!--            }).then((result) => {-->
<!--                if (result.isConfirmed) {-->
<!--                    var fileName = result.value; // 获取输入的数据集名称-->

<!--                    // 创建一个文件输入框-->
<!--                    var fileInput = document.createElement('input');-->
<!--                    fileInput.type = 'file';-->
<!--                    fileInput.multiple = true; // 允许多文件选择-->
<!--                    fileInput.style.display = 'none';-->
<!--                    document.body.appendChild(fileInput);-->

<!--                    // 文件选择后触发的事件-->
<!--                    fileInput.addEventListener('change', function (event) {-->
<!--                        var files = event.target.files;-->
<!--                        if (files.length > 0) {-->
<!--                            var formData = new FormData();-->
<!--                            for (var i = 0; i < files.length; i++) {-->
<!--                                formData.append('files', files[i]);-->
<!--                            }-->

<!--                            // 添加文件名到 FormData-->
<!--                            formData.append('fileName', fileName);-->

<!--                            // 发送文件到后端-->
<!--                            $.ajax({-->
<!--                                url: '/uploadValMask', // 后端控制器的请求路径-->
<!--                                type: 'POST',-->
<!--                                data: formData,-->
<!--                                processData: false,-->
<!--                                contentType: false,-->
<!--                                success: function (response) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'success',-->
<!--                                        title: '文件上传成功',-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 1500-->
<!--                                    });-->
<!--                                    console.log(response);-->
<!--                                },-->
<!--                                error: function (xhr, status, error) {-->
<!--                                    Swal.fire({-->
<!--                                        icon: 'error',-->
<!--                                        title: '文件上传失败',-->
<!--                                        text: '错误信息: ' + error,-->
<!--                                        showConfirmButton: false,-->
<!--                                        timer: 2000-->
<!--                                    });-->
<!--                                    console.error('请求失败:', error);-->
<!--                                }-->
<!--                            });-->
<!--                        }-->
<!--                    });-->

<!--                    // 手动触发文件输入框的点击事件以打开文件选择框-->
<!--                    fileInput.click();-->
<!--                }-->
<!--            });-->
<!--        });-->
<!--    });-->
<!--</script>-->
<!--显示终端内容-->
<!--<script th:inline="javascript">-->
<!--    var stompClient = null;-->

<!--    function connect() {-->
<!--        var socket = new SockJS('/console');-->
<!--        stompClient = Stomp.over(socket);-->
<!--        // 发送 HTTP 请求获取控制台输出-->
<!--        $.get('/console', function (consoleOutput) {-->
<!--            showMessage(consoleOutput);-->
<!--        });-->
<!--        // stompClient.connect({}, function(frame) {-->
<!--        //     console.log('Connected: ' + frame);-->
<!--        //     stompClient.subscribe('/topic/consoleOutput', function(message) {-->
<!--        //         showMessage(JSON.parse(message.body).content);-->
<!--        //     });-->
<!--        // });-->
<!--    }-->

<!--    function showMessage(message) {-->
<!--        // var terminal = document.getElementById('terminal');-->
<!--        // terminal.innerHTML += message + '<br>';-->
<!--        // terminal.scrollTop = terminal.scrollHeight;-->
<!--    }-->

<!--    connect();-->
<!--</script>-->

</body>
</html>

